<template>
  <div id="account">
    <div v-if="isLoading">
      <div class="account-head vux-1px-t">

        <router-link to="accountList" class="accountLink">账单</router-link>
        <div class="balance">
          <p style="font-size: 0.4rem;">
            <countup :end-val="money" :duration="1" :decimals="2" class="countupd"></countup>
          </p>
          <p style="font-size: 0.26rem;">账户余额(元)</p>
        </div>
      </div>
      <div style="margin-top: 0.2rem; background: #fff; padding: 0.2rem 0rem;" class="flex account-actions text-center">
        <div class="flex-auto vux-1px-r">
          <router-link to="recharge" style="display: block;">
            <div><i class="icon icon-ziyuan1"></i></div>
            <p>账户充值</p>
          </router-link>
        </div>
        <div class="flex-auto">
          <router-link to="withdrawals" style="display: block;">
            <div><i class="icon icon-ziyuan"></i></div>
            <p>账户提现</p>
          </router-link>
        </div>
      </div>
      <div style="margin-top: 0.2rem; margin-bottom: 0.2rem;">
        <group>
          <cell title="保证金(元)" is-link link="recharge">
            <p><span style="color: #666;">{{ freeze }}</span></p>
            <p class="text-orange f26">已冻结</p>
          </cell>
          <cell title="我的佣金(元)" is-link link="commission"><span style="color: #666;">{{ brokerage }}</span></cell>

          <!--<cell title="途鸟金币(个)" is-link><span style="color: #666;">{{ gold }}</span></cell>-->

        </group>
      </div>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Cell, Countup } from 'vux'
export default{
  name: 'account',
  components: {
    PubHeader,
    Countup,
    Cell
  },
  created() {
    this.getData()
  },
  data() {
    return {
      isLoading: false,
      money: 0,
      give: '',
      guoqi_give: '',
      brokerage: '',
      gold: '',
      freeze: ''
    }
  },
  methods: {
    getData() {
      this.$http.post($config.host + '/api/Account/myAccountInfo', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const {code, data, msg} = res.data
        if(code == 1 && data) {
          this.isLoading = true
          this.money = parseFloat(data.money)
          this.give = data.give
          this.guoqi_give = data.guoqi_give
          this.brokerage = data.brokerage
          this.gold = data.gold
          this.freeze = data.freeze
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })


      this.$http.post($config.host + '/api/Userinfo/userPage', qs.stringify({
        id: this.$store.state.userInfo.uid,
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const { code, msg, data } = res.data
        if(code == '1') {
          let userInfo = this.$store.state.userInfo
          userInfo.verify_company = data.verify_company
          userInfo.verify_card = data.verify_card
          this.$store.commit('setUserInfo', userInfo)
          window.localStorage.user = JSON.stringify(userInfo)
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })

    }
  }
}
</script>
<style scoped>
.account-head{
  height: 4.35rem;
  padding-top: 1rem;
  background: #fff url("../../static/img/zhbg.png") bottom left no-repeat;
  background-size: 7.5rem 3.1rem;
  position: relative;
}
.accountLink{
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
}
.account-head .balance{
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  margin: 0 auto;
  background: #ff5722;
  color: #fff;
  text-align: center;
  line-height: 0.55rem;
  padding-top: 0.65rem;
}
.account-head .balance:after{
  content: '';
  position: absolute;
  z-index:1;
  top: 0.1rem;
  left: 0.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid #ffc4b8;
}
.account-head .balance:before{
  content: '';
  position: absolute;
  z-index:1;
  top: -0.2rem;
  left: -0.2rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 1px solid #ffc4b8;
}
.countupd{
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}
.account-actions>div{
  min-height: 1.2rem;
}
.account-actions .icon{
  font-size: 0.8rem;
  color: #ffc6b5;
  display: block;
  margin-top: -0.25rem;
}
.account-actions p{
  margin-top: -0.25rem;
}
</style>
